<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js字符串处理</title>
    <style>
        #warp{ width: 592px;height: 200px; border: 5px solid #dcdcdb; padding: 10px; }
        #warp span{ background-color: yellow;}
        #cz{ width: 592px;height: 100px; border: 5px solid #828181; padding: 10px;}
        .btn{ width: 592px;  }
        .content{ border-top: 2px solid #929291;height: 50px; padding-top: 30px;}
        .btn input{ width:80px; height: 25px;}
        #text0{ display: none;}
    </style>
    <script>
        window.onload=function(){
            var oDiv0=document.getElementById("cz");
            var oBtn0=oDiv0.getElementsByTagName("input");
            var warp=document.getElementById("warp");
            var text=document.getElementById("text");
            var text0=document.getElementById("text0");
            var query=document.getElementById("query");
            var str=warp.innerHTML;
            var off=true;
            query.onclick=function(){
                var s=text.value;
                var arr=  str.split(s);
                if(off){
                    warp.innerHTML=arr.join('<span>'+s+'</span>');
                }else{
                    var s0=text0.value;
                    warp.innerHTML=arr.join('<span>'+s0+'</span>');
                }
            }
            oBtn0[0].onclick=function(){
                off=true;
                text0.style.display='none';
                query.value="查询";
            }
            oBtn0[1].onclick=function(){
                off=false;
                text0.style.display='inline';
                query.value="替换";
            }
        }
    </script>
</head>
<body>
<div id="warp">
    苏州河十八湾，见证了城市的发展，时代的变迁，在上海历史上留下了珍贵的一笔。日前，2018上海市民文化节在普陀区图书馆启动了改革开放四十周年系列赛事启动仪式。市民文化节“改革开放40周年”知识大赛、市民写作大赛、新诗创作大赛、市民艺术大展、改革开放40周年上海市民生活变化大展系列活动同时启动，市民可通过答题、书写、讲演、绘画、摄影等各种方式参与进来，见证祖国四十年翻天覆地的发展变化。新启动的“苏州河书房”里，上海作协赵丽宏、杨杨进行“读懂40年”的对话式主题讲座，据悉，之后普陀区还将新增添多个阅读体验空间，令书香浸润市民心灵。
    您现在的位置：首页 > 文体社会 > 正文
    用写作、诗歌、画笔、摄影共同见证改革开放40周年
</div>
<div id="cz">
    <div class="btn">
        <input type="button" value="查找">
        <input type="button" value="替换">
    </div>
    <div class="content">
        <input type="text" id="text">
        <input type="text" id="text0">
        <input type="button" value="查询" id="query">
    </div>
</div>


</body>
</html>